<html lang="en">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="./uikit/uikit-2.25.0/css/uikit.min.css" />
    <script src="./jquery/jquery-3.1.1.min.js"></script>
    <script src="./uikit/uikit-2.25.0/js/uikit.min.js"></script>
</head>
<body>
    <!-- 这个 html 分为了三部分, 一般 navbar 和 footer 是 __base__.html, 中间的部分是 blog.html -->
    <!-- 参考自: 廖雪峰-Python 实战 day-08 -->

    <!-- .uk-navbar	添加这个类到 <nav> 元素中, 定义导航栏组件 -->
    <!-- .uk-navbar-brand 添加这个类到一个 <a> 或 <div> 元素中, 来表示你的品牌 -->
    <!-- .uk-navbar-nav	添加这个类到 <ul> 元素来创建导航. 使用 <a> 元素作为列表中的菜单项 -->
    <!-- .uk-navbar-flip 类到一个 <div> 元素中, 将其进行分组并将导航项对齐到导航栏右侧 -->

    <!-- .uk-container 类到一个块元素中, 为其设置一个最大宽度并将网页的主要内容包装在其中. 对于大屏幕采用不同的最大宽度 -->
    <!-- .uk-container-center 类, 将容器居中, 对于其它的块元素, 你需要设定一个宽度 -->
    <!-- .uk-icon-* 在任何 <i> 或 <span> 元素中添加, 瞧, 你有了一个矢量图标, 它能像文本一样继承了尺寸和色彩 -->
    <!-- <a> 元素也可以添加 icon -->
    <nav class="uk-navbar">
        <div class="uk-container uk-container-center">
            <a href="/" class="uk-navbar-brand">Awesome</a>
            <ul class="uk-navbar-nav">
                <li data-url="blogs"><a href="/"><i class="uk-icon-home"></i> 日志</a></li>
                <li><a target="_blank" href="http://www.liaoxuefeng.com/wiki/0014316089557264a6b348958f449949df42a6d3a2e542c000"><i
                    class="uk-icon-book"></i> 教程</a></li>
                <li><a target="_blank" href="https://github.com/michaelliao/awesome-python3-webapp"><i
                    class="uk-icon-code"></i> 源码</a></li>
            </ul>
            <div class="uk-navbar-flip">
                <ul class="uk-navbar-nav">
                    <li><a href="/signin"><i class="uk-icon-sign-in"></i> 登陆</a></li>
                    <li><a href="/register"><i class="uk-icon-edit"></i> 注册</a></li>
                </ul>
            </div>
        </div>
    </nav>
    <!-- .uk-grid 类来创建网格容器. 对子元素添加一个 .uk-width-* 类来限定单元格的宽度. 网格支持1、2、3、4、5、6和10个单元划分 -->
    <!-- .uk-width-medium-* 影响宽度在 768px 以上的设备, 网格列将在较小的视口中堆叠 -->
    <!-- .uk-article 添加这个类来定义文章组件. 通常你需要使用 <article> 元素 -->
    <!-- .uk-article-divider 对 <hr> 元素添加这个类, 建立一个间隔使文章各部分分开 -->

    <!-- .uk-panel 为<div>元素添加这个类, 定义面板组件 -->
    <!-- .uk-panel-header 用一条水平线分隔面板的标题和内容 -->
    <!-- .uk-panel-title 为标题元素添加这个类创建面板标题 -->
    <!-- .uk-list 到一个无序或有序列表即可, 这时列表将不显示任何间距及列表样式 -->
    <!-- .uk-list-line 线分割列表项 -->
    <div class="uk-container uk-container-center">
        <div class="uk-grid">
            <div class="uk-width-medium-3-4">
                <article class="uk-article">
                </article>
                <hr class="uk-article-divider">
            </div>
            <div class="uk-width-medium-1-4">
                <div class="uk-panel uk-panel-header">
                    <h3 class="uk-panel-title">友情链接</h3>
                    <ul class="uk-list uk-list-line">
                        <li><i class="uk-icon-thumbs-o-up uk-icon-large"></i> <a target="_blank" href="http://www.liaoxuefeng.com/category/0013738748415562fee26e070fa4664ad926c8e30146c67000">编程</a></li>
                        <li><i class="uk-icon-thumbs-o-up uk-icon-spin"></i> <a target="_blank" href="http://www.liaoxuefeng.com/category/0013738748248885ddf38d8cd1b4803aa74bcda32f853fd000">读书</a></li>
                        <li><i class="uk-icon-thumbs-o-up uk-icon-hover"></i> <a target="_blank" href="http://www.liaoxuefeng.com/wiki/001374738125095c955c1e6d8bb493182103fac9270762a000">Python教程</a></li>
                        <li><i class="uk-icon-thumbs-o-up uk-icon-button"></i> <a target="_blank" href="http://www.liaoxuefeng.com/wiki/0013739516305929606dd18361248578c67b8067c8c017b000">Git教程</a></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <!-- .uk-margin-top 添加顶部外边距 -->
    <!-- .uk-margin-bottom 添加底部外边距 -->
    <!-- .uk-margin-large-top 添加较大的顶部外边距 -->
    <!-- .uk-text-center 文本水平居中 -->
    <div class="uk-container uk-container-center uk-margin-large-top" style="background-color:#eee; border-top:1px solid #ccc;">
        <div class="uk-text-center">
            <div class="uk-panel uk-margin-top uk-margin-bottom">
                <p>
                    <a target="_blank" href="http://weibo.com/liaoxuefeng" class="uk-icon-button uk-icon-weibo"></a>
                    <a target="_blank" href="https://github.com/michaelliao" class="uk-icon-button uk-icon-github"></a>
                    <a target="_blank" href="http://www.linkedin.com/in/liaoxuefeng" class="uk-icon-button uk-icon-linkedin-square"></a>
                    <a target="_blank" href="https://twitter.com/liaoxuefeng" class="uk-icon-button uk-icon-twitter"></a>
                </p>
                <p>Powered by <a href="http://awesome.liaoxuefeng.com">Awesome Python Webapp</a>. Copyright &copy; 2014. [<a href="/manage/" target="_blank">Manage</a>]</p>
                <p><a href="http://www.liaoxuefeng.com/" target="_blank">www.liaoxuefeng.com</a>. All rights reserved.</p>
                <a target="_blank" href="http://www.w3.org/TR/html5/"><i class="uk-icon-html5" style="font-size:64px; color: #444;"></i></a>
            </div>
        </div>
    </div>
</body>
</html>
